[Vue] 강의 공부 정리

#vue

vue 공부용

vue2 -> vue3 로 넘어오면서 컴포넌트가
태그로 한번 감싸지는 부분이 삭제되었음.
렌더링시점
- react로 따지면 setState가 실행 될 때 dom이 re-render 됨. vue는 그 시점이 어디인지?
- import { ref } from 'vue' 사용. 데이터가 바뀔 때 다시 렌더링 되는걸 vue에서는 리액티브 변화라고 함. documnet
- import { reactivity } from 'vue'는 ref처럼 리액티브한 효과를 줄 수 있지만 array object 만 취급이 가능하다. (ref는 모든 자료형 가능)
v-on: -> @ 로 생략 가능. v-bind 전체 생략 가능.
oninput onchange 차이
- onchange는 요소의 값이 정해질 때. 포커스를 잃었을 때 발동되고 oninput은 요소의 값이 변경되는 즉시 발동된다. 따라서 oninput이 onchange보다 먼저 실행된다. medium
양방향 바인딩(v-model)
- ```
<input :type="inputType" :value="authorRef" @input="updateName" />
<input :type="inputType" v-model="authorRef" />
```
- 두개는 같은 동작을 함. value, input 두개 다 바인딩 해줄 필요 없이 v-model 사용으로 한번에 가능
form에서 preventDefault를 vue방식으로 표현 할 수 있음.
- document에서 볼 수 있음.

v-for을 사용할 때 :key는 필수로 바운딩 필요함.

<div v-for="todo in todos" :key="todo.id" class="card">
  <div class="card-body p-2">
    {{ todo }}
  </div>
</div>

checkbox 바인딩

<input
  class="form-check-input"
  type="checkbox"
  v-model="todo.completed"
/>
<label class="form-check-label">
  {{ todo.value }}
</label>

style 바인딩
- :style
  - <div :style="todo.completed ? todoStyle : {}">style 바인딩</div>
- :class
  - <div :class="{ todo : todo.completed }">class 바인딩</div> todo.completed가 true면 todo css class 적용

vue에서 컴포넌트를 만들때는 크게 3가지로 구분됨. tempalte, script, style

<template>Todo Simple Form</template>

<script>
export default {};
</script>

<style></style>